
<template>
    <div>
     <div></div>
    </div>
</template>

<script>
import { useRouter, useRoute } from 'vue-router'
import { ref, watch } from 'vue'

import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'

import { RouterLink, useLink } from 'vue-router'
export default {
    name:"BaseVue",
    props: {

    },
    setup (props) {
        // const router = useRouter()
        // const route = useRoute()

        // router.push({
        //     name: 'search',
        //     query: {
        //     ...route.query,
        //     },
        // })

        watch(
            () => route.params.id,
            async newId => {
                userData.value = await fetchUser(newId)
            }
        )


        // 与 beforeRouteLeave 相同，无法访问 `this`
        onBeforeRouteLeave((to, from) => {

            // return false
        })


        // 与 beforeRouteUpdate 相同，无法访问 `this`
        onBeforeRouteUpdate(async (to, from) => {
            // return false
        })


        const {
            // 解析出来的路由对象
            route,
            // 用在链接里的 href
            href,
            // 布尔类型的 ref 标识链接是否为激活的
            isActive,
            // 布尔类型的 ref  标识链接是否为严格活跃的
            isExactActive,
            // 导航至该链接的函数
            navigate
        } = useLink(props)

    const isExternalLink = computed(
      () => typeof props.to === 'string' && props.to.startsWith('http')
    )
         return { isExternalLink, href, navigate, isActive }

    },
}
</script>

<style lang="scss" scoped>

</style>